<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="area_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList:[
        { year: "1901 年", type: "衣服", nums: [7, 13.2] },
        { year: "1902 年", type: "衣服", nums: [6.9, 12.4] },
        { year: "1903 年", type: "衣服", nums: [9.5, 16.5] },
        { year: "1904 年", type: "衣服", nums: [10.2, 18.4] },
        { year: "1905 年", type: "衣服", nums: [11.4, 15.2] },
        { year: "1906 年", type: "衣服", nums: [13.2, 17.6] },
        { year: "1907 年", type: "衣服", nums: [10.2, 16.2] },
        { year: "1908 年", type: "衣服", nums: [11.3, 16.2] },
        { year: "1909 年", type: "衣服", nums: [13.6, 18.3] },
        { year: "1910 年", type: "衣服", nums: [14.8, 20.5] },
        { year: "1911 年", type: "衣服", nums: [13.2, 22.5] },
        { year: "1912 年", type: "衣服", nums: [12.4, 24.2] },
        { year: "1913 年", type: "衣服", nums: [13.6, 22.3] },
        { year: "1914 年", type: "衣服", nums: [14.2, 24.2] },
      ]
    };
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "area_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    this.chart.scale({
      nums: {
        sync: true,
        nice: true,
      },
      year: {
        nice: true,
      },
    });
    this.chart.tooltip({
      shared: true,
      showMarkers: false,
      showCrosshairs: true,
      domStyles:{
        "g2-tooltip-list-item":{
          textAlign:'left'
        }
      }
    });
    const dv = new DataView().source(this.dataList);
    dv.transform({
      type:"map",
      callback(row){
        row.nums = +( (row.nums[0] + row.nums[1]) / 2 ).toFixed(2);
        return row
      }
    })
    console.log(dv.rows)
    const v1 = this.chart.createView();
    v1.data(this.dataList);
    v1.scale("nums", {
      alias: "预估销量范围",
      formatter(val){
        return val + '万件'
      }
    });
    v1.area().position("year*nums");

    const v2 = this.chart.createView();
    v2.data(dv.rows);
    v2.axis(false);
    v2.scale("nums", {
      alias: "平均销量",
      formatter(val){
        return val + '万件'
      }
    });
    v2.line().position("year*nums");
    v2.point().position("year*nums").size(4).shape("circle").style({
      stroke: "#fff",
      lineWidth: 1,
      fillOpacity: 1,
    });

    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>